<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监听原理方法</title>
</head>
<body>
<div id="app">
    <p style="font-size:25px;">计数器:{{counter}}</p>
    <button @click="counter++" style="font-size:25px">点击</button>
    {{message.split('').reverse().join('')}}
</div>
</body>
<script src="./js/vue.js" type="application/javascript"></script>
<script type="application/javascript">
    new Vue({
        el:"#app",
        data:{
            counter : 1,
            message:'summer!'
        },
        watch:{
            counter:function (nval,oval) {
                alert('计数器值的变化:' +  oval + '变为' + nval + '!');
            }
        },
        computed:{
            reverseMessage:function(){
                return this.message.split('').reverse().join('')
            }
        }
    });
</script>
</html>